<template>
  <div class="app-container calendar-list-container">
    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
      <el-steps :active="active" finish-status="success" class="steps">
        <el-step title="基本信息"></el-step>
        <el-step title="商品详情"></el-step>
        <el-step title="商品规格"></el-step>
      </el-steps>
      <div class="baseInfo" v-if="active==0">
        <el-form-item label="商品名称" prop="name">
          <el-input placeholder="请输入商品名称" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="短标题" prop="simpleTitle">
          <el-input placeholder="请输入短标题" v-model="form.simpleTitle"></el-input>
        </el-form-item>
        <el-form-item label="长标题" prop="title">
          <el-input placeholder="请输入长标题" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="卖点" prop="salesPromotion">
          <el-input placeholder="请输入卖点" v-model="form.salesPromotion"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            class="avatar-uploader"
            :limit="maxLimit"
            name="imageFile"
            list-type="picture-card"
            :disabled="isDisabled"
            :auto-upload="true"
            :headers="requestHeader"
            :action="uploadImgUrl"
            :show-file-list="true"
            :on-success="handleAvatarSuccess"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
            :data="uploadParam"
            accept="image/jpeg, image/png"
            :file-list="uploadFileList"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="店铺" prop="mkCategoryCode">
          <el-select
            class="filter-item"
            v-model="form.shopId"
            placeholder="请选择店铺"
            @change="shopChange"
          >
            <el-option
              v-for="item in  shopOptions"
              :key="item.shopId"
              :label="item.shopName"
              :value="item.shopId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类" prop="mkCategoryCode">
          <el-cascader
            :options="categoryOptions"
            ref="goodCate"
            @change="onCategoryChange"
            :show-all-levels="false"
            change-on-select
            v-model="categoryCode"
            value="code"
            :props="props"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="分组" prop="shopGroup">
          <el-select v-model="form.shopGrouptionsVal" multiple filterable placeholder="请选择分组">
            <el-option
              v-for="item in shopGrouptions"
              :key="item.groupId"
              :label="item.groupName"
              :value="item.groupId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款方式" prop="onlyPayMethod">
          <el-select class="filter-item" v-model="form.onlyPayMethod" placeholder="请选择付款方式">
            <el-option
              v-for="item in  payMethodOptions"
              :key="item.picklistValue"
              :label="item.picklistText"
              :value="item.picklistValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="原价（元）" prop="oringinalPrice">
            <el-input placeholder="请输入原价" v-model.number="form.oringinalPrice"></el-input>
        </el-form-item>
        <el-form-item label="现价（元）" prop="currentPrice">
            <el-input placeholder="请输入现价" v-model.number="form.currentPrice"></el-input>
        </el-form-item>-->
        <el-form-item label="状态*" prop="status">
          <el-select class="filter-item" v-model="form.status" clearable placeholder="请选择状态">
            <el-option
              v-for="item in statusArray"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="goodDesc" v-if="active ==1">
        <el-form-item prop="description">
          <quill-editor
            v-model="form.description"
            class="editor"
            ref="myQuillEditor"
            :options="editorOption"
          ></quill-editor>
          <el-upload
            style="display:none"
            :headers="requestHeader"
            :action="uploadImgUrl"
            :show-file-list="false"
            :before-upload="newEditorbeforeupload"
            :on-success="newEditorSuccess"
            :data="uploadParam"
            name="imageFile"
            ref="uniqueId"
            id="uniqueId"
          ></el-upload>
        </el-form-item>
      </div>
      <div class="goodSpec" v-if="active ==2">
        <div class="filter-container">
          <el-button
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            icon="edit"
            @click="addGoodSpec"
          >新增规格</el-button>
        </div>
        <el-card class="box-card">
          <table class="gridtable">
            <thead>
              <tr>
                <th>规格名称</th>
                <th>规格值</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <el-select
                    v-model="form.modelAttrId"
                    filterable
                    @change="remoteMethod"
                    @visible-change="initialize"
                    allow-create
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.modelAttrId"
                      :label="item.modelAttrName"
                      :value="item.modelAttrName"
                    ></el-option>
                  </el-select>
                </td>
                <td>
                  <el-select
                    v-model="form.attrValueId"
                    multiple
                    filterable
                    allow-create
                    @visible-change="initializeEs"
                    @change="remoteMethode(form.attrValueId)"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in optiones"
                      :key="item.attrValueId"
                      :label="item.attrValueName"
                      :value="item.attrValueName"
                    ></el-option>
                  </el-select>
                </td>
                <td>
                  <el-button type="danger"></el-button>
                </td>
              </tr>
            </tbody>

            <!-- ------------------------------------------------------ -->

            <tbody v-show="showTR">
              <tr>
                <td>
                  <el-select
                    v-model="form.modelAttrIde"
                    filterable
                    @change="remoteMethod_a"
                    @visible-change="initialize_a"
                    allow-create
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options_a"
                      :key="item.modelAttrId"
                      :label="item.modelAttrName"
                      :value="item.modelAttrName"
                    ></el-option>
                  </el-select>
                </td>
                <td>
                  <el-select
                    v-model="form.attrValueIde"
                    multiple
                    filterable
                    allow-create
                    @visible-change="initializeEs_a"
                    @change="remoteMethode_a(form.attrValueIde)"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in optiones_a"
                      :key="item.attrValueId"
                      :label="item.attrValueName"
                      :value="item.attrValueName"
                    ></el-option>
                  </el-select>
                </td>
                <td>
                  <el-button type="danger" @click="deleteTr">删除</el-button>
                </td>
              </tr>
            </tbody>
            <!-- ------------------------------------------------------------------ -->

            <tbody v-show="showTRs">
              <tr>
                <td>
                  <el-select
                    v-model="form.modelAttrIdes"
                    filterable
                    @change="remoteMethod_b"
                    @visible-change="initialize_b"
                    allow-create
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options_b"
                      :key="item.modelAttrId"
                      :label="item.modelAttrName"
                      :value="item.modelAttrName"
                    ></el-option>
                  </el-select>
                </td>
                <td>
                  <el-select
                    v-model="form.attrValueIdes"
                    multiple
                    filterable
                    allow-create
                    @visible-change="initializeEs_b"
                    @change="remoteMethode_b(form.attrValueIdes)"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in optiones_b"
                      :key="item.attrValueId"
                      :label="item.attrValueName"
                      :value="item.attrValueName"
                    ></el-option>
                  </el-select>
                </td>
                <td>
                  <el-button type="danger" @click="deleteTrs">删除</el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </el-card>
        <!-- <good-spec
          v-for="(item,index) in allComponents"
          :key="index"
          :index="index"
          @remove="remove"
          :items="allComponents"
          @uploadData="getData"
          ref="child"
        ></good-spec>-->

        <!-- <span>{{form.modelAttrId}} </span>{{form.modelAttrIde}} <span></span><span>{{form.modelAttrIdes}}</span>
        <span>  :limit="maxLimit" {{form.attrValueId}}</span><span>{{form.attrValueIde}} </span><span>{{form.attrValueIdes}}</span>-->
        <br>
        <el-form-item label="一级规格图片*" v-show="specPicture">
          <el-upload
            class="avatar-uploader"
           
            name="imageFile"
            list-type="picture-card"
            :disabled="isDisableds"
            :auto-upload="true"
            :headers="requestHeader"
            :action="uploadImgUrl"
            :show-file-list="true"
            :on-success="handleAvatarSuccesss"
            :on-remove="handleRemoves"
            :before-upload="beforeAvatarUploads"
            :data="uploadParam"
            accept="image/jpeg, image/png"
            :file-list="uploadFileLists"
            :class="{hide:hideUploadEdit}"
            :on-change="handleEditChange"
            
          >
            <img v-if="imageUrls" :src="imageUrls" class="avatar" />
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-upload>
        </el-form-item>
        <table class="gridtable">
          <thead>
            <tr>
              <th>{{form.modelAttrId}}</th>
              <th>{{form.modelAttrIde}}</th>
              <th>{{form.modelAttrIdes}}</th>
              <th>划线价*</th>
              <th>在售价*</th>
              <th>成本价*</th>
              <th>库存*</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for=" (item,index) in tableDataList" :key="index">
              <td v-if="item.trE==''"></td>
              <td v-else v-text="item.trE"></td>
              <td v-if="item.trEs==''"></td>
              <td v-else v-text="item.trEs"></td>
              <td v-if="item.trEsk==''"></td>
              <td v-else v-text="item.trEsk"></td>
              <td>
                <el-input
                  type="number"
                  v-model.number="form.price[index]"
                  @blur="testUser(form.price[index])"
                ></el-input>
              </td>
              <td>
                <el-input
                  type="number"
                  v-model.number="form.memberPrice[index]"
                  @blur="testUser_a(form.memberPrice[index])"
                ></el-input>
              </td>
              <td>
                <el-input
                  type="number"
                  v-model.number="form.menchantPrice[index]"
                  @blur="testUser_b(form.menchantPrice[index])"
                ></el-input>
              </td>
              <td>
                <el-input
                  type="number"
                  v-model.number="form.stockQuantity[index]"
                  @blur="testUser_c(form.stockQuantity[index])"
                ></el-input>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-form>
    <div slot="footer" align="center" class="footerBtn">
      <el-button type="primary" v-if="active==1 || active==2" @click="prev">上一步</el-button>
      <el-button type="primary" v-if="active==0 || active==1" @click="next">下一步</el-button>
      <el-button type="primary" v-if="active==2" @click="create('form')" :loading="loading">提 交</el-button>
    </div>
  </div>
</template>

<script>
import {
  page,
  addObj,
  getObj,
  delObj,
  putObj,
  getByModelList,
  addGoodsModel,
  selectByGoodsModelVal,
  addGoodsModelVal
} from "api/shop/goods/goods/index";
import { getPicklist } from "api/param/picklist/index";
import { getAllShopList } from "api/shop/shops/index";
import { getToken } from "utils/auth";
import { fetchTree } from "api/shop/goods/category/index";
import { goodsGroup } from "api/shop/goods/group/index";
import { mapGetters } from "vuex";
import goodSpec from "./components/goodSpec.vue";
import globalVariable from "@/utils/global";
export default {
  name: "addGoods",
  components: {
    "good-spec": goodSpec
  },
  data() {
    return {
      options: [],
      modelS: [],

      optiones: [],
      modelValS: [],
      //--------------------------
      options_a: [],
      modelS_a: [],

      optiones_a: [],
      modelValS_a: [],
      //--------------------------
      options_b: [],
      modelS_b: [],

      optiones_b: [],
      modelValS_b: [],
      //------------------
      i: 0,
      hideUploadEdit: false,
      fileShow:true,
      showTR: false,
      showTRs: false,
      specPicture: false,
      priceShow: false,
      memberPriceShow: false,
      menchantPriceShow: false,
      stockQuantityShow: false,
      tableDataList: [{ trE: undefined, trEs: undefined, trEsk: undefined }],
      //-----------------------
      active: 0,
      uploadImgUrl: this.GLOBAL.uploadImgUrl,
      uploadParam: { useType: "goods" },
      requestHeader: { token: getToken() },
      picklistCode: "payMethod",
      imageUrl: "",
      imageUrls: "",
      imgs: [],
      imgss: [],
      specs: [],
      uploadFileList: [],
      uploadFileLists: [],
      allComponents: [],
      categoryCode: [],
      maxLimitNum: 6,
      maxLimitNums: 0,
      isDisabled: false,
      isDisableds: false,
      categoryOptions: [],
      shopOptions: [],
      listQuery: {
        shopId: undefined
      },
      payMethodOptions: [
        { picklistValue: "0", picklistText: "不限制" },
        { picklistValue: "1", picklistText: "在线支付" },
        { picklistValue: "2", picklistText: "到店支付" },
        { picklistValue: "3", picklistText: "货到付款" }
      ],
      loading: false,
      props: {
        value: "code",
        label: "name"
      },
      shopGrouptions: [], //分组
      statusArray: [
        {
          value: "1",
          label: "上架"
        },
        {
          value: "-1",
          label: "下架"
        },
        {
          value: "0",
          label: "库存"
        }
      ], //状态数组
      form: {
        name: undefined,
        simpleTitle: undefined,
        title: undefined,
        mkCategoryCode: undefined,
        categoryName: undefined,
        oringinalPrice: undefined,
        currentPrice: undefined,
        description: undefined,
        categoryName: undefined,
        specName: undefined,
        stockNum: undefined,
        status: undefined,
        netWeight: undefined,
        netWeightUnit: undefined,
        price: [],
        memberPrice: [],
        menchantPrice: [],
        stockQuantity: [],
        onlyPayMethod: undefined,
        shopId: undefined,
        goodImgs: [],
        goodsSpecImgs: [],
        goodSpecs: [],
        salesPromotion: undefined,
        shopGrouptionsVal: [], //分组的值
        modelAttrId: undefined,
        modelAttrIde: undefined,
        modelAttrIdes: undefined,
        attrValueId: [],
        attrValueIde: [],
        attrValueIdes: [],
        modelAttrName: undefined
      },
      goodsModel: {
        //添加商品规格
        modelAttrId: undefined,
        modelAttrName: undefined,
        shopId: undefined
      },
      goodsModelByList:{
        modelAttrName:undefined,
        shopId:undefined
      },
        goodsModelByList_a:{
        modelAttrName:undefined,
        shopId:undefined
      },
       goodsModelByList_b:{
        modelAttrName:undefined,
        shopId:undefined
      },
      goodsModel_a: {
        //添加商品规格
        modelAttrId: undefined,
        modelAttrName: undefined,
        shopId: undefined
      },
      goodsModel_b: {
        //添加商品规格
        modelAttrId: undefined,
        modelAttrName: undefined,
        shopId: undefined
      },
      goodsModelVal: {
        attrValueId: undefined,
        attrValueName: [],
        modelAttrId: undefined,
        shopId: undefined
      },
      goodsModelVal_a: {
        attrValueId: undefined,
        attrValueName: [],
        modelAttrId: undefined,
        shopId: undefined
      },
      goodsModelVal_b: {
        attrValueId: undefined,
        attrValueName: [],
        modelAttrId: undefined,
        shopId: undefined
      },
      goodsModelValCondition: {
        //查询条件
        attrValueName: undefined,
        shopId:undefined
      },
      goodsModelValCondition_a: {
        //查询条件
        attrValueName: undefined,
        shopId:undefined
      },
      goodsModelValCondition_b: {
        //查询条件
        attrValueName: undefined,
        shopId:undefined
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur"
          },
          {
            min: 1,
            max: 200,
            message: "长度在 1 到 200 个字符",
            trigger: "blur"
          }
        ],
        simpleTitle: [
          {
            required: true,
            message: "请输入短标题",
            trigger: "blur"
          },
          {
            min: 1,
            max: 200,
            message: "长度在 1 到 200 个字符",
            trigger: "blur"
          }
        ],
        title: [
          {
            required: true,
            message: "请输入长标题",
            trigger: "blur"
          },
          {
            min: 1,
            max: 400,
            message: "长度在 1 到 400 个字符",
            trigger: "blur"
          }
        ],
        salesPromotion: [
          {
            required: true,
            message: "请输入卖点",
            trigger: "blur"
          },
          {
            min: 1,
            max: 400,
            message: "长度在 1 到 400 个字符",
            trigger: "blur"
          }
        ]
      },
      editorOption: {
        placeholder: "",
        theme: "snow", // snow or 'bubble'
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"],
              ["blockquote", "code-block"],
              [{ header: 1 }, { header: 2 }],
              [{ list: "ordered" }, { list: "bullet" }],
              [{ script: "sub" }, { script: "super" }],
              [{ indent: "-1" }, { indent: "+1" }],
              [{ direction: "rtl" }],
              [{ size: ["small", false, "large", "huge"] }],
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ color: [] }, { background: [] }],
              [{ font: [] }],
              [{ align: [] }],
              ["clean"],
              ["link", "image", "video"]
            ],
            handlers: {
              image: function(value) {
                if (value) {
                  var fileInput = document.querySelector("#uniqueId input"); //隐藏的file元素
                  fileInput.click(); //触发事件
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          }
        }
      }
    };
  },
  computed: {
    ...mapGetters(["elements"])
  },
  // mounted(){
  //   var imgHandler = async function(state) {
  //     if (state) {
  //       var fileInput =document.querySelector('#uniqueId input') //隐藏的file元素
  //       fileInput.click() //触发事件
  //     }
  //   }
  //   this.$refs.myQuillEditor.quill.getModule("toolbar").addHandler("image", imgHandler)
  // },
  created() {
    //this.getPayMethodList();
    this.getAllShopList();
    this.getAllGroup();
    this.tableDataList = [];
  },
  watch: {
    "form.attrValueId": function(newValue, oldValue) {
      if (
        this.form.attrValueId != undefined &&
        this.form.attrValueId.length > 0
      ) {
        this.maxLimitNums=this.form.attrValueId.length;
        this.specPicture = true;
      } else {
        this.specPicture = false;
      }
      this.tableDataList = [];
      if (
        this.form.attrValueId != undefined &&
        this.form.attrValueId.length > 0 &&
        (this.form.attrValueIde != undefined &&
          this.form.attrValueIde.length > 0) &&
        (this.form.attrValueIdes != undefined &&
          this.form.attrValueIdes.length > 0)
      ) {
        
        

        for (var i = 0; i < this.form.attrValueId.length; i++) {
          for (var j = 0; j < this.form.attrValueIde.length; j++) {
            for (var k = 0; k < this.form.attrValueIdes.length; k++) {
              // this.tableDataList.push(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
              //alert(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
              let newObj = {};
              newObj.trE = this.form.attrValueId[i];
              newObj.trEs = this.form.attrValueIde[j];
              newObj.trEsk = this.form.attrValueIdes[k];
              this.tableDataList.push(newObj);
            }
          }
        }
      } else if (
        this.form.attrValueId != undefined &&
        this.form.attrValueId.length > 0 &&
        (this.form.attrValueIde == undefined ||
          this.form.attrValueIde.length <= 0) &&
        (this.form.attrValueIdes != undefined &&
          this.form.attrValueIdes.length > 0)
      ) {
        for (var i = 0; i < this.form.attrValueId.length; i++) {
          for (var k = 0; k < this.form.attrValueIdes.length; k++) {
            // this.tableDataList.push(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
            //alert(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
            let newObj = {};
            newObj.trE = this.form.attrValueId[i];
            newObj.trEs = this.form.attrValueIde[j];
            newObj.trEsk = this.form.attrValueIdes[k];
            this.tableDataList.push(newObj);
          }
        }
      } else if (
        this.form.attrValueId != undefined &&
        this.form.attrValueId.length > 0 &&
        (this.form.attrValueIde != undefined &&
          this.form.attrValueIde.length > 0) &&
        (this.form.attrValueIdes == undefined ||
          this.form.attrValueIdes.length <= 0)
      ) {
        for (var i = 0; i < this.form.attrValueId.length; i++) {
          for (var j = 0; j < this.form.attrValueIde.length; j++) {
            // this.tableDataList.push(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
            //alert(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
            let newObj = {};
            newObj.trE = this.form.attrValueId[i];
            newObj.trEs = this.form.attrValueIde[j];
            newObj.trEsk = this.form.attrValueIdes[k];
            this.tableDataList.push(newObj);
          }
        }
      } else if (
        this.form.attrValueId != undefined &&
        this.form.attrValueId.length > 0 &&
        (this.form.attrValueIde == undefined ||
          this.form.attrValueIde.length <= 0) &&
        (this.form.attrValueIdes == undefined ||
          this.form.attrValueIdes.length <= 0)
      ) {
        for (var i = 0; i < this.form.attrValueId.length; i++) {
          // this.tableDataList.push(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
          //alert(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
          let newObj = {};
          newObj.trE = this.form.attrValueId[i];
          newObj.trEs = this.form.attrValueIde[j];
          newObj.trEsk = this.form.attrValueIdes[k];
          this.tableDataList.push(newObj);
        }
      }
      this.$forceUpdate();
    },
    "form.attrValueIde": function(newValue, oldValue) {
      this.tableDataList = [];
      if (
        this.form.attrValueId != undefined &&
        this.form.attrValueId.length > 0 &&
        (this.form.attrValueIde != undefined &&
          this.form.attrValueIde.length > 0) &&
        (this.form.attrValueIdes != undefined &&
          this.form.attrValueIdes.length > 0)
      ) {
        for (var i = 0; i < this.form.attrValueId.length; i++) {
          for (var j = 0; j < this.form.attrValueIde.length; j++) {
            for (var k = 0; k < this.form.attrValueIdes.length; k++) {
              // this.tableDataList.push(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
              //alert(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
              let newObj = {};
              newObj.trE = this.form.attrValueId[i];
              newObj.trEs = this.form.attrValueIde[j];
              newObj.trEsk = this.form.attrValueIdes[k];
              this.tableDataList.push(newObj);
            }
          }
        }
      } else if (
        this.form.attrValueId != undefined &&
        this.form.attrValueId.length > 0 &&
        (this.form.attrValueIde == undefined ||
          this.form.attrValueIde.length <= 0) &&
        (this.form.attrValueIdes != undefined &&
          this.form.attrValueIdes.length > 0)
      ) {
        for (var i = 0; i < this.form.attrValueId.length; i++) {
          for (var k = 0; k < this.form.attrValueIdes.length; k++) {
            // this.tableDataList.push(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
            //alert(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
            let newObj = {};
            newObj.trE = this.form.attrValueId[i];
            newObj.trEs = this.form.attrValueIde[j];
            newObj.trEsk = this.form.attrValueIdes[k];
            this.tableDataList.push(newObj);
          }
        }
      } else if (
        this.form.attrValueId != undefined &&
        this.form.attrValueId.length > 0 &&
        (this.form.attrValueIde != undefined &&
          this.form.attrValueIde.length > 0) &&
        (this.form.attrValueIdes == undefined ||
          this.form.attrValueIdes.length <= 0)
      ) {
        for (var i = 0; i < this.form.attrValueId.length; i++) {
          for (var j = 0; j < this.form.attrValueIde.length; j++) {
            // this.tableDataList.push(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
            //alert(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
            let newObj = {};
            newObj.trE = this.form.attrValueId[i];
            newObj.trEs = this.form.attrValueIde[j];
            newObj.trEsk = this.form.attrValueIdes[k];
            this.tableDataList.push(newObj);
          }
        }
      } else if (
        this.form.attrValueId != undefined &&
        this.form.attrValueId.length > 0 &&
        (this.form.attrValueIde == undefined ||
          this.form.attrValueIde.length <= 0) &&
        (this.form.attrValueIdes == undefined ||
          this.form.attrValueIdes.length <= 0)
      ) {
        for (var i = 0; i < this.form.attrValueId.length; i++) {
          // this.tableDataList.push(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
          //alert(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
          let newObj = {};
          newObj.trE = this.form.attrValueId[i];
          newObj.trEs = this.form.attrValueIde[j];
          newObj.trEsk = this.form.attrValueIdes[k];
          this.tableDataList.push(newObj);
        }
      }
      this.$forceUpdate();
    },
    "form.attrValueIdes": function(newValue, oldValue) {
      this.tableDataList = [];
      if (
        this.form.attrValueId != undefined &&
        this.form.attrValueId.length > 0 &&
        (this.form.attrValueIde != undefined &&
          this.form.attrValueIde.length > 0) &&
        (this.form.attrValueIdes != undefined &&
          this.form.attrValueIdes.length > 0)
      ) {
        for (var i = 0; i < this.form.attrValueId.length; i++) {
          for (var j = 0; j < this.form.attrValueIde.length; j++) {
            for (var k = 0; k < this.form.attrValueIdes.length; k++) {
              // this.tableDataList.push(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
              //alert(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
              let newObj = {};
              newObj.trE = this.form.attrValueId[i];
              newObj.trEs = this.form.attrValueIde[j];
              newObj.trEsk = this.form.attrValueIdes[k];
              this.tableDataList.push(newObj);
            }
          }
        }
      } else if (
        this.form.attrValueId != undefined &&
        this.form.attrValueId.length > 0 &&
        (this.form.attrValueIde == undefined ||
          this.form.attrValueIde.length <= 0) &&
        (this.form.attrValueIdes != undefined &&
          this.form.attrValueIdes.length > 0)
      ) {
        for (var i = 0; i < this.form.attrValueId.length; i++) {
          for (var k = 0; k < this.form.attrValueIdes.length; k++) {
            // this.tableDataList.push(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
            //alert(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
            let newObj = {};
            newObj.trE = this.form.attrValueId[i];
            newObj.trEs = this.form.attrValueIde[j];
            newObj.trEsk = this.form.attrValueIdes[k];
            this.tableDataList.push(newObj);
          }
        }
      } else if (
        this.form.attrValueId != undefined &&
        this.form.attrValueId.length > 0 &&
        (this.form.attrValueIde != undefined &&
          this.form.attrValueIde.length > 0) &&
        (this.form.attrValueIdes == undefined ||
          this.form.attrValueIdes.length <= 0)
      ) {
        for (var i = 0; i < this.form.attrValueId.length; i++) {
          for (var j = 0; j < this.form.attrValueIde.length; j++) {
            // this.tableDataList.push(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
            //alert(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
            let newObj = {};
            newObj.trE = this.form.attrValueId[i];
            newObj.trEs = this.form.attrValueIde[j];
            newObj.trEsk = this.form.attrValueIdes[k];
            this.tableDataList.push(newObj);
          }
        }
      } else if (
        this.form.attrValueId != undefined &&
        this.form.attrValueId.length > 0 &&
        (this.form.attrValueIde == undefined ||
          this.form.attrValueIde.length <= 0) &&
        (this.form.attrValueIdes == undefined ||
          this.form.attrValueIdes.length <= 0)
      ) {
        for (var i = 0; i < this.form.attrValueId.length; i++) {
          // this.tableDataList.push(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
          //alert(this.form.attrValueId[i]+","+this.form.attrValueIde[j]+","+this.form.attrValueIdes[k]);
          let newObj = {};
          newObj.trE = this.form.attrValueId[i];
          newObj.trEs = this.form.attrValueIde[j];
          newObj.trEsk = this.form.attrValueIdes[k];
          this.tableDataList.push(newObj);
        }
      }
      this.$forceUpdate();
    }
  },
  methods: {
    testUser(value) {
      if (value == "" || value == undefined) {
        this.$message({
          showClose: true,
          message: "划线价不能为空!",
          type: "error",
          direction: 10000
        });
        this.priceShow = false;
      } else {
        if (
          /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) == false ||
          typeof value !== "number"
        ) {
          this.$message({
            showClose: true,
            message: "请输入大于0的数!",
            type: "error",
            direction: 10000
          });
          this.priceShow = false;
        } else {
          this.priceShow = true;
        }
      }
    },

    testUser_a(value) {
      if (value == "" || value == undefined) {
        this.$message({
          showClose: true,
          message: "在售价不能为空!",
          type: "error",
          direction: 10000
        });
        this.memberPriceShow = false;
      } else {
        if (
          /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) == false ||
          typeof value !== "number"
        ) {
          this.$message({
            showClose: true,
            message: "请输入大于0的数!",
            type: "error",
            direction: 10000
          });
          this.memberPriceShow = false;
        } else {
          this.memberPriceShow = true;
        }
      }
    },
    testUser_b(value) {
      if (value == "" || value == undefined) {
        this.$message({
          showClose: true,
          message: "成本价不能为空!",
          type: "error",
          direction: 10000
        });
        this.menchantPriceShow = false;
      } else {
        if (
          /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) == false ||
          typeof value !== "number"
        ) {
          this.$message({
            showClose: true,
            message: "请输入大于0的数!",
            type: "error",
            direction: 10000
          });
          this.menchantPriceShow = false;
        } else {
          this.menchantPriceShow = true;
        }
      }
    },
    testUser_c(value) {
      if (value == "" || value == undefined) {
        this.$message({
          showClose: true,
          message: "库存不能为空!",
          type: "error",
          direction: 10000
        });
        this.stockQuantityShow = false;
      } else {
        if (/^[1-9]([0-9])*$/.test(value) == false) {
          this.$message({
            showClose: true,
            message: "请输入正整数",
            type: "error",
            direction: 10000
          });
          this.stockQuantityShow = false;
        } else {
          this.stockQuantityShow = true;
        }
      }
    },
    initialize(val) {
      if (val == true) {
        getByModelList(this.goodsModel.shopId).then(response => {
          this.options = response.data;
        });
      }
    },
    initialize_a(val) {
      if (val == true) {
        getByModelList(this.goodsModel.shopId).then(response => {
          this.options_a = response.data;
        });
      }
    },
    initialize_b(val) {
      if (val == true) {
        getByModelList(this.goodsModel.shopId).then(response => {
          this.options_b = response.data;
        });
      }
    },
    remoteMethod(val) {
      this.form.attrValueId = [];
      var regu = /^ +| +$/g;
      if (val == "" || val == undefined || regu.test(val)) {
      } else {
        this.goodsModelByList.modelAttrName=val;
        this.goodsModelByList.shopId=this.form.shopId;
        addGoodsModel(this.goodsModelByList).then(response => {
        });
        this.goodsModelValCondition.attrValueName = val;
        this.goodsModelValCondition.shopId=this.form.shopId;
      }
    },
    initializeEs(val){
      if(val==true){
        selectByGoodsModelVal(this.goodsModelValCondition).then(response => {
          this.goodsModelVal.modelAttrId = response.data.selectByName.modelAttrId;
          this.optiones = response.data.selectByList;
        });
      }
    },
    remoteMethode(val) {
      if (val == "" || val == undefined || val.length==0) {
      } else {
          this.goodsModelVal.attrValueName=[];
          this.goodsModelVal.attrValueName.push(val);
          addGoodsModelVal(this.goodsModelVal).then(response => {});
      }
      
    },

    //-----------------
   
    remoteMethod_a(val) {
      this.form.attrValueIde = [];
      var regu = /^ +| +$/g;
      if (val == "" || val == undefined || regu.test(val)) {
      } else {
        this.goodsModelByList_a.modelAttrName=val;
        this.goodsModelByList_a.shopId=this.form.shopId;
        addGoodsModel(this.goodsModelByList_a).then(response => {
        });
        this.goodsModelValCondition_a.attrValueName = val;
        this.goodsModelValCondition_a.shopId=this.form.shopId;
      }
    },

 initializeEs_a(val){
      if(val==true){
        selectByGoodsModelVal(this.goodsModelValCondition_a).then(response => {
          this.goodsModelVal_a.modelAttrId = response.data.selectByName.modelAttrId;
          this.optiones_a = response.data.selectByList;
        });
      }
    },

    remoteMethode_a(val) {
       if (val == "" || val == undefined || val.length==0) {
      } else {
          this.goodsModelVal_a.attrValueName=[];
          this.goodsModelVal_a.attrValueName.push(val);
          addGoodsModelVal(this.goodsModelVal_a).then(response => {});
      }
    },
    //----------------------
   
      remoteMethod_b(val) {
      this.form.attrValueIdes = [];
      var regu = /^ +| +$/g;
      if (val == "" || val == undefined || regu.test(val)) {
      } else {
        this.goodsModelByList_b.modelAttrName=val;
        this.goodsModelByList_b.shopId=this.form.shopId;
        addGoodsModel(this.goodsModelByList_b).then(response => {
        });
        this.goodsModelValCondition_b.attrValueName = val;
        this.goodsModelValCondition_b.shopId=this.form.shopId;
      }
    },

    initializeEs_b(val){
       if(val==true){
        selectByGoodsModelVal(this.goodsModelValCondition_b).then(response => {
          this.goodsModelVal_b.modelAttrId = response.data.selectByName.modelAttrId;
          this.optiones_b = response.data.selectByList;
        });
      }
    },

    remoteMethode_b(val) {
       if (val == "" || val == undefined || val.length==0) {
      } else {
          this.goodsModelVal_b.attrValueName=[];
          this.goodsModelVal_b.attrValueName.push(val);
          addGoodsModelVal(this.goodsModelVal_b).then(response => {});
      }
    },
    //------------------
    next() {
      if (this.active == 0) {
        var flag = this.checkBaseInfo();
      } else if (this.active == 1) {
        var flag = this.checkDescInfo();
        console.log(
          "created == I got the data:",
          JSON.stringify(this.allComponents)
        );
      }
      if (flag) {
        if (this.active++ > 2) this.active = 0;
      }
    },
    prev() {
      --this.active;
      if (this.active < 0) this.active = 0;
    },
    maxLimit() {
      return this.maxLimit;
    },
    getCategoryList(shopId) {
      this.listQuery.shopId = shopId;
      fetchTree(this.listQuery).then(data => {
        this.categoryOptions = data;
      });
    },
    getAllGroup() {
      goodsGroup().then(response => {
        this.shopGrouptions = response;
      });
    },
    getPayMethodList() {
      getPicklist(this.picklistCode).then(response => {
        this.payMethodOptions = response.data;
      });
    },
    getAllShopList() {
      getAllShopList().then(response => {
        this.shopOptions = response.data;
      });
    },
    async create(formName) {
      this.specs = [];
      var spec = {
        name: this.form.specName,
        stockQuantity: this.form.formStockQuantity,
        netWeight: this.form.formNetWeight,
        netWeightUnit: this.form.formNetWeightUnit,
        price: this.form.formPrice,
        memberPrice: this.form.formMemberPrice,
        menchantPrice: this.form.formMenchantPrice
      };
      this.specs.push(spec);
      this.specs.concat(this.allComponents);
      const set = this.$refs;
      for (var i = 0; i < this.allComponents.length; i++) {
        var flag = await this.$refs.child[i].validateForm();
        if (!flag.valid) {
          return false;
        }
        this.specs.push(flag.data);
      }

      if(this.imgss!='' && this.imgss.length!=0){
        if(this.imgss.length==this.form.attrValueId.length){
          if (
        this.priceShow == true &&
        this.memberPriceShow == true &&
        this.menchantPriceShow == true &&
        this.stockQuantityShow == true
      ) {
        set[formName].validate(valid => {
          if (valid) {
            this.form.goodImgs = this.imgs;
            this.form.goodsSpecImgs = this.imgss;
            this.form.goodSpecs = this.specs;
            this.loading = true;
            addObj(this.form)
              .then(() => {
                this.loading = false;
                this.$notify({
                  title: "成功",
                  message: "创建成功",
                  type: "success",
                  duration: 2000
                });
                this.$store.dispatch("delVisitedViews", {
                  path: "/shopManager/goodManager/goodsAdd"
                });
                this.$router.push("/shopManager/goodManager/goodsManager");
              })
              .catch(() => {
                this.loading = false;
              });
          } else {
            return false;
          }
        });
      } else {
        this.$notify({
          title: "错误",
          message: "规格表格格式错误!",
          type: "error",
          duration: 2000
        });
      }
        }else{
          this.$notify({
          title: "错误",
          message: "一级规格图必须与所选一级规格值匹配!",
          type: "error",
          duration: 2000
        });
        }
      }else{
         this.$notify({
          title: "错误",
          message: "一级规格图必填!",
          type: "error",
          duration: 2000
        });
      }
     
    },
    handleEditChange (file, fileList) {
      this.hideUploadEdit = fileList.length >= this.form.attrValueId.length;
    },
    handleAvatarSuccess(res, file, fileList) {
      this.uploadFileList = fileList;
      --this.maxLimitNum;
      if (this.maxLimitNum <= 0) this.isDisabled = true;
      this.imgs.push(res.data);
    },
    handleAvatarSuccesss(res, file, fileList) {
        this.imgss.push(res.data);
        this.uploadFileLists = fileList;
    },

    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG || !file.type) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    beforeAvatarUploads(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG || !file.type) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleRemove(file, fileList) {
        if(file != null){
        if(file.response == undefined){
          if(file.url != undefined){
            var fileName = file.url;
            if(file.url.indexOf(this.GLOBAL.imgBaseURL) > -1){
              fileName = file.url.substring(this.GLOBAL.imgBaseURL.length,file.url.length);
            }
            var index = this.imgs.indexOf(fileName);
            if (index > -1) {
              this.imgs.splice(index, 1);
            }
          }
          
        }else{
          var fileName = file.response.data;
          var index = this.imgs.indexOf(fileName);
          if (index > -1) {
              this.imgs.splice(index, 1);
          }
        }
      console.log(this.imgs)
      this.maxLimitNum++;
      this.isDisabled = false;
      }
    },

    handleRemoves(file, fileList) {
      this.hideUploadEdit = fileList.length >= this.form.attrValueId.length;
      if (file != null) {
        var fileName = file.response.data;
        var index = this.imgss.indexOf(fileName);
        if (index > -1) {
          this.imgss.splice(index, 1);
        }
        this.maxLimitNums++;
       
      }
      
    },
    onEditorChange({ editor, html, text }) {
      this.content = html;
    },
    addGoodSpec() {
      this.i++;
      if (this.i == 1) {
        this.showTR = true;
      } else if (this.i == 2) {
        this.showTRs = true;
      }
    },
    deleteTr() {
      this.i = 0;
      this.showTR = false;
      this.form.modelAttrIde = undefined;
      this.form.attrValueIde = [];
    },
    deleteTrs() {
      this.i = 0;
      this.showTRs = false;
      this.form.modelAttrIdes = undefined;
      this.form.attrValueIdes = [];
    },
    //删除子组件
    remove(index) {
      console.log("splice:" + index);
      this.allComponents.splice(index, 1);
      console.log("deleted:", JSON.stringify(this.allComponents));
    },
    //  get the data from child
    getData: function(val) {
      let index = val.index;
      this.allComponents[index] = val.data;
      console.log("I got the data:", JSON.stringify(this.allComponents));
    },
    onCategoryChange(item) {
      // console.log(item, this.$refs['goodCate'].currentLabels)
      var labels = this.$refs["goodCate"].currentLabels;
      this.form.mkCategoryCode = item[item.length - 1];
      this.form.categoryName = labels[labels.length - 1];
    },
    checkBaseInfo() {
      if (this.form.name == "" || this.form.name == undefined) {
        this.$message.error("商品名称不能为空");
        return false;
      }

      if (this.form.title == "" || this.form.title == undefined) {
        this.$message.error("商品长标题不能为空");
        return false;
      }
      if (this.form.simpleTitle == "" || this.form.simpleTitle == undefined) {
        this.$message.error("商品短标题不能为空");
        return false;
      }
      if (
        this.form.mkCategoryCode == "" ||
        this.form.mkCategoryCode == undefined
      ) {
        this.$message.error("商品分类不能为空");
        return false;
      }
      if (this.form.status == "" || this.form.status == undefined) {
        this.$message.error("商品状态不能为空");
        return false;
      }
      if (
        this.form.shopGrouptionsVal == "" ||
        this.form.shopGrouptionsVal == undefined
      ) {
        this.$message.error("商品分组不能为空");
        return false;
      }
      if (this.imgs.length == 0) {
        this.$message.error("商品图片不能为空");
        return false;
      }
      return true;
    },
    checkDescInfo() {
      if (this.form.description == "" || this.form.description == undefined) {
        this.$message.error("商品详情不能为空");
        return false;
      }
      return true;
    },
    shopChange(event, item) {
      var shopId = event;
      this.goodsModel.shopId = shopId;
      this.goodsModel_a.shopId = shopId;
      this.goodsModel_b.shopId = shopId;
      this.goodsModelVal.shopId = shopId;
      this.goodsModelVal_a.shopId = shopId;
      this.goodsModelVal_b.shopId = shopId;
      this.getCategoryList(shopId);
    },
    newEditorbeforeupload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //上传图片回调
    newEditorSuccess(response, file, fileList) {
      if (response.status === 0) {
        // 获取富文本组件实例
        let quill = this.$refs.myQuillEditor.quill;
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        let imgUrl = this.GLOBAL.imgBaseURL + response.data;
        quill.insertEmbed(length, "image", imgUrl);
        // 调整光标到最后
        quill.setSelection(length + 1);
      }
    }
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.steps {
  margin-left: 15%;
  margin-bottom: 5%;
}
.editor {
  height: 400px;
}
.footerBtn {
  margin-top: 10%;
}
table.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
  width: 100%;
}
table.gridtable th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}
table.gridtable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
  text-align: center;
}
.hide .el-upload--picture-card {
	display: none;
}
</style>